import styled from 'styled-components';

export const Newhomewrap = styled.div`
background-color: #d6cfbf;
&>img{
    display: block;
    position: absolute;
    top: 131px;
    left:200px;
}
&>.link{
    position: absolute;
    cursor: pointer;
    top:140px;
    left:400px;
    text-shadow: #fff 1px 1px 1px;
    font-size: 16px;
    &:hover{
        text-decoration: underline;
    }
}
&>.fon{
    position: absolute;
    top:180px;
    left:400px;
    color:white;
    text-shadow: #000 1px 1px 1px;
}

.card2-enter {
    transform:translateX(0);
    /* left:-160px; */
    transition:all 0.5s linear;
}

.card2-enter-active {
    transform:translateX(210px);
    /* left:150px; */
    transition:all 0.5s linear;
}

.card2-enter-done {
    /* left:150px; */
    transform:translateX(210px);
    transition:all 0.5s linear;
}

.card2-exit {
    transition:all 0.5s linear;
    transform:translateX(210px);
    /* left:150px; */
}

.card2-exit-active {
    transition:all 0.5s linear;
    transform:translateX(0);
    /* left:-160px; */
}

.card2-exit-done {
    transition:all 0.5s linear; 
    transform:translateX(0);
}

.player{
    position: fixed;
    top:200px;
    left:-210px;
    display: flex;
    background: rgba(2, 6, 44,0.5);
    align-items: center;
    &>.iconfont{
        display: block;
        cursor: pointer;
        transform: translateX(20px);
    }
}
`